<template>
		<view class="zuipageWrap">
		<view class="J_conditionWrap uni-flex uni-row">
			<view class="text des">盘点(贵重)计划：</view>
			<view class="text inputwrap zimpo" style="flex: 1;">
				<view class="uni-list-cell-navigate">
					<view class="zpicker">
						<text>{{fupan_temp.planName}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="J_content">
			<view class="J_card">
				<view class="uni-flex uni-row" @click="zslide(fupan_temp)">
					<view class="J_tit">
						<view class="J_cicon"></view>
						药品信息
						<uniIcon type="arrowdown" size="20" class="J_slideIcon" v-if="fupan_temp.slideHide"></uniIcon>
						<uniIcon type="arrowup" size="20" class="J_slideIcon" v-if="!fupan_temp.slideHide"></uniIcon>
					</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">品名：</view>
					<view class="J_des">{{fupan_temp.name}}</view>
				</view>
				
				<block v-if="fupan_temp.mangp =='false'">
					<view class="uni-flex uni-row" >
						<view class="J_label">库存数量：</view>
						<view class="J_des">{{fupan_temp.num}}</view>
					</view>
				</block>
				
				<view class="uni-flex uni-row J_editWrap" @click="changeNum(fupan_temp)">
					<view class="J_label">盘点数量：</view>
					<view class="J_des">
						{{fupan_temp.smnum}}
						<uniIcon type="compose" size="26" class="J_editIcon"></uniIcon>
					</view>
				</view>
				<view class="uni-flex uni-row J_editWrap J_editWrapS">
					<view class="J_label">架位：</view>
					<view class="J_des" v-if="jwList.length">
						<picker class="zpicker" @change="bindPickerChange" :value="fupan_temp.jwcodeIndex" :range="jwList" range-key="name">
							<view class="uni-input uni-ellipsis zinput">{{curPicker}}</view>
						</picker>
					</view>
				</view>	
				<view class="uni-flex uni-row" >
					<view class="J_label">规格：</view>
					<view class="J_des">{{fupan_temp.specifications}}</view>
				</view>
				<view class="uni-flex uni-row" >
					<view class="J_label">单位：</view>
					<view class="J_des">{{fupan_temp.unit}}</view>
				</view>
				<view class="uni-flex uni-row" >
					<view class="J_label">厂商：</view>
					<view class="J_des">{{fupan_temp.factory}}</view>
				</view>
				<view class="uni-flex uni-row" :class="{isSlide: fupan_temp.slideHide}">
					<view class="J_label">药库：</view>
					<view class="J_des">{{fupan_temp.drugstorage}}</view>
				</view>	
				<view class="uni-flex uni-row" :class="{isSlide: fupan_temp.slideHide}">
					<view class="J_label">货位：</view>
					<view class="J_des">{{fupan_temp.locatno}}</view>
				</view>
				<block v-if="fupan_temp.pihao =='false'">
					<view class="uni-flex uni-row" >
						<view class="J_label">批号：</view>
						<view class="J_des">{{fupan_temp.batchnumber}}</view>
					</view>
					<view class="uni-flex uni-row" >
						<view class="J_label">有效期：</view>
						<view class="J_des">{{fupan_temp.validity}}个月</view>
					</view>
					<view class="uni-flex uni-row" >
						<view class="J_label">生产日期：</view>
						<view class="J_des">{{fupan_temp.productdate}}</view>
					</view>
				</block>
				
				<block v-if="fupan_temp.mangp =='false'">
					<view class="uni-flex uni-row" >
						<view class="J_label">质量状态：</view>
						<view class="J_des">{{fupan_temp.qualitystatus}}</view>
					</view>
				</block>
			</view>
		</view>
		
		<view class="uni-btn-v J_foot">
			<button class="zbtn J_sub" @click="save">提交</button>
		</view>
		
		<uni-popup :show="zpopupFlag" position="middle" mode="middle" @hidePopup="hidezpop">
			<view class="zpopupWrap uni-tip">
				<view class="uni-tip-title">医内物流</view>
				<view class="uni-tip-subtit">请输入盘点数量</view>
				<view class="uni-tip-content">
					<view class="J_inputWrap">
						<input class="uni-input" type="number" v-model="invoiceId_temp" :maxlength="maxlength" :focus="triggerFocus_temp" />
					</view>
				</view>
				<view class="uni-tip-group-button">
					<view class="uni-tip-button" @click="hidezpop">取消</view>
					<view class="uni-tip-button" @click="surezpop">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>

import uniIcon from "@/components/uni-icon/uni-icon.vue";
import uniPopup from "@/components/uni-popup/uni-popup.vue";
import {zInventorygzByCode, zInventorygzUpdate, zDrugStorageList, zJwList} from '@/util/api';
import {
	mapState,mapGetters,mapMutations,mapActions
} from 'vuex'

export default {
	components: {uniIcon, uniPopup},
	data() {
		return {
			lastResBack: {
				invoiceId: '',
				supplierIndex: '',
				drugStorageIndex: ''
			},
			invoiceId: '',
			maxlength: 20,
			tableData: [],
			supplierIndex: 0,
			supplierList: [
				{
					id: '',
					name: '供应商'
				}
			],
			drugStorageIndex: 0,
			drugStorageList: [
				{
					id: '',
					name: '药库'
				}
			],
			conditionWidth: '',
			triggerFocus1: false,
			curItem_temp: null,
			triggerFocus_temp: false,
			zpopupFlag: false,
			invoiceId_temp: '',
			jwList: [],
			w_planId: '',
			fupan_temp: {
				planId: '',
				planName: '',
				storeId: '',
				storeName: '',
			},
			curPicker: null
		}
	},
	computed: {
		
	},
	onLoad(e) {
		let _that = this;
		
		let medCheckRes = uni.getStorageSync('fupan_temp');
		if(medCheckRes){
			medCheckRes = JSON.parse(medCheckRes);
			this.fupan_temp = medCheckRes;
			this.w_planId = this.fupan_temp.planId;
			this.fupan_temp.jwcodeIndex = 0;
			this.fetchJWList(this.fupan_temp.storeId);
		}
		
		console.log(JSON.stringify(this.fupan_temp));
	},
	onUnload() {
		uni.$off('zInvertory');
		this.setLastRes();
	},
	methods: {
		...mapMutations(['w_setPlanId']),
		async fetchJWList (storeId) {
			this.jwList = [];
			let res = await zJwList({'storeId': storeId});
			res = this.zutil.formatAxiosData(res);
			if(res.status == 0){
				this.jwList = res.data;
				this.curPicker = res.data[0].name;
				
				this.jwList.forEach((m, n)=>{
					if(this.fupan_temp.jwcode == m.name){
						this.fupan_temp.jwcodeIndex = n;
						this.curPicker = m.name;
					}
				})
				
			}else{
				this.zutil.ztip(res.message || "获取药库架位列表失败！");
			}
		},
		async fetchAllData () {
			let res2 = await zDrugStorageList();
			res2 = this.zutil.formatAxiosData(res2);
			if(res2.status == 0){
				this.drugStorageList = res2.data;
			}else{
				this.zutil.ztip(res2.message || "获取药库列表失败！");
			}
		},
		async fetchInvoice () {
			this.triggerFocus1 = false;
			uni.hideKeyboard();
			
			if(!this.w_planId){
				this.zutil.ztip("请先选择盘点计划单");
				return false;
			}
			
			this.setLastRes();
			let tpl_param = {
        invoiceId: this.invoiceId,
				planId: this.w_planId
      }
			this.tableData = [];
			uni.showLoading({title: '加载中', mask: true});
			let res = await zInventorygzByCode(tpl_param);
			
      res = this.zutil.formatAxiosData(res);
			uni.hideLoading();
			console.info(res.data);
			if(res.status == 0){
			//	this.tableData = res.data;
				if(res.data && res.data.length){
					res.data.forEach(v=>{
						v.jwcodeIndex = 0;
						this.jwList.forEach((m, n)=>{
							if(v.jwcode == m.name){
								v.jwcodeIndex = n;
							}
						})
					})
				}
				this.tableData = this.tableData.concat(res.data);
				this.lastResBack.invoiceId = this.invoiceId;
				this.lastResBack.supplierIndex = this.supplierIndex;
				this.lastResBack.drugStorageIndex = this.drugStorageIndex;
			}else{
				this.zutil.ztip(res.description || "未获取到该批号下的药品信息");
				this.zutil.zuiShaker();
			}
			
		},
		inputEvent (e) {
			/* let _val = e.detail.value;
			if(_val.length == this.maxlength)
				this.fetchInvoice(); */
		},
		inputConfirm (e) {
			let _val = e.detail.value;
			// if(_val.length == this.maxlength)
				this.fetchInvoice();
		},
		cancle () {
			this.setLastRes();
			this.invoiceId = '';
			this.tableData = [];
			this.triggerFocus1 = false;
			setTimeout(()=>{
				this.triggerFocus1 = true;
			}, 50)
		},
		save () {
			this.zutil.zconfirm("是否确认盘点该药品？", (type)=>{
				if(type){
					// 确定
					this.saveS();
				}else{
					// 取消
				}
			});
		},
		async saveS () {
			let tpl_param = {
			  invoiceId: this.invoiceId,
				list: [],
				planId: this.w_planId
			}
			tpl_param.list.push(this.fupan_temp);
			console.log(tpl_param);
			uni.showLoading({title: '加载中', mask: true});
			let res = await zInventorygzUpdate(tpl_param);
			res = this.zutil.formatAxiosData(res);
			uni.hideLoading();
			if(res.status == 0){
				this.zutil.ztip(res.description || "复盘药品成功");
				uni.navigateBack({
					delta: 1
				})
			}else{
				this.zutil.zalert(res.description || "复盘药品失败！");
				this.zutil.zuiShaker();
			}
		},
		zslide (item, index) {
			let slideFlag = item.slideHide;
			this.$set(item, 'slideHide', !slideFlag);
			
		},
		scanCode () {
			var _that = this;
			uni.scanCode({
				success: function (res) {
					_that.cancle();
					let cres = res.result;
					_that.invoiceId = cres;
					_that.fetchInvoice();
				},
				fail: function (res) {}
			})
		},
		bindPickerChange: function(e) {
			this.curPicker = this.jwList[e.target.value].name;
			console.log(this.curPicker);
			this.$set(this.fupan_temp, 'jwcodeIndex', e.target.value);
			this.$set(this.fupan_temp, 'jwcode', this.curPicker);
		},
		bindPickerChangeD: function(e) {
			this.drugStorageIndex = e.target.value;
		},
		changeNum (item, index) {
			this.curItem_temp = item;
			this.zpopupFlag = true;
			this.triggerFocus_temp = true;
			return false;
			// #ifdef APP-PLUS
			let _that = this;
			plus.nativeUI.prompt("请输入盘点数量: ", function(e){
				if(e.index==0){
					let _val = parseInt(e.value, 10);
					if(_val){
						item.smnum = _val;
					}
				}
			}, "院内物流", item.smnum, ["确定","取消"]);
			// #endif
		},
		lastRes () {
			let medCheckRes = uni.getStorageSync('medCheckRes');
			if(medCheckRes){
				medCheckRes = JSON.parse(medCheckRes);
				this.lastResBack = medCheckRes;
				this.invoiceId = medCheckRes.invoiceId;
				this.supplierIndex = medCheckRes.supplierIndex;
				this.drugStorageIndex = medCheckRes.drugStorageIndex;
			}
			this.fetchInvoice();
		},
		setLastRes () {
			uni.setStorageSync('medCheckRes', JSON.stringify(this.lastResBack));
		},
		choosePlan () {
			uni.setStorageSync('choosePlanIdFlag', true);
			uni.navigateTo({
				url: '/pages/inventoryplan/list'
			});
		},
		hidezpop () {
			this.invoiceId_temp = '';
			this.zpopupFlag = false;
			this.triggerFocus_temp = false;
		},
		surezpop () {
			let val = parseFloat(this.invoiceId_temp) || 0;
			this.curItem_temp.smnum = val?val.toFixed(4):0;
			this.hidezpop();
		}
	},
	filters:{
		//价格过滤器
		// arg表示原始参数,num表示小数点位,默认保留两位,symbol表示符号,spilt是否进行逗号分隔【true，false】
		priceFormat:function (arg,num=0,symbol,spilt=false) {
			/**
			 * 默认数字: {{number|priceFormat()}}
				保留两位小数: {{number|priceFormat(2)}}
				保留三位小数: {{number|priceFormat(3)}}
				添加￥符号并保留两位: {{number|priceFormat(2,'￥')}}
				添加$符号并保留三位: {{number|priceFormat(3,'$')}}
				添加千分号符号: {{number|priceFormat(0,'',true)}}
				添加千分号符号并保留两位: {{number|priceFormat(2,'',true)}}
				添加￥和千分号符号并保留两位: {{number|priceFormat(2,'￥',true)}}
			 **/
			arg=Number(arg).toFixed(num);
			if(spilt==true){
				if (arg.indexOf('.') == -1) {
					arg=arg.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				}else{
					var parts = arg.split(".");
					parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
					arg=parts.join(".");
				}
			}
			if(symbol){
				arg=symbol+arg;
			}
			return arg;
		},
	}
}
</script>

<style scoped lang="scss">
.zuipageWrap {
	background: #F5F5F5;
	height: 100%;
	
	.J_top {
		position: relative;
		padding: 20upx;
		background: #fff;
		
		.J_searchIcon {
			position: absolute;
	    left: 46upx;
	    top: 34upx;
	    z-index: 99;
		}
		.J_search {
			width: 100%;
			height: 80upx;
			display: flex;  
	    align-items: center;
			
			.uni-input {
				height: 80upx;
				line-height: 80upx;
				min-height: 80upx;
				padding: 0 24upx 0 88upx;
				border: 2upx solid #ddd;
				border-radius: 40upx;
			}
		}
		.J_scanIcon {
			position: absolute;
			right: 36upx;
			top: 34upx;
			z-index: 99;
			width: 80upx;
			text-align: center;
		}
	}
	
	.J_content {
		padding: 20upx 0 60px;
		background: #F5F5F5;
		.J_card {
			border-top: 2upx solid #ddd;
			border-bottom: 2upx solid #ddd;
			height: auto;
			background: #fff;
			padding: 0 32upx;
			color: #3C3C3C;
			margin-bottom: 20upx;
			overflow: hidden;
			
			&.isSlide, &:first-child {
				height: auto;
			}
			
			&:last-child {
				margin-bottom: 0;
			}
	
			.uni-row {
				border-bottom: 2upx solid #e5e5e5;
				padding: 18upx 0;
				&.no_border {
					border-bottom: 0;
				}
				&:first-child {
					padding: 28upx 0;
				}
				&:last-child {
					border-bottom: 0;
				}
				&.isSlide {
					display: none!important;
				}
				.J_tit {
					height: 44upx;
					line-height: 44upx;
					font-size: 30upx;
					position: relative;
					padding-left: 32upx;
					font-weight: bold;
					overflow: hidden;
					width: 100%;
					.J_cicon {
						position: absolute;
						left: 0;
						top: 0;
						width:12upx;
						height: 44upx;
						background: #FFC12E;
						display: block;
					}
					.J_slideIcon {
						position: absolute;
						right: 0;
						top: 6upx;
					}
				}
				.J_label {
					width: 184upx;
				}
				.J_des {
					flex: 1;
					position: relative;
					text-align: right;
					.uni-input {
						padding: 0 56upx 0 24upx;
					}
				}
				
				&.J_editWrap {
					position: relative;
					padding-right: 52upx;
					border-bottom: 2upx solid #ffb200;
					.J_editIcon {
						position: absolute;
						right: -52upx;
						top: 0;
						width: 40upx;
					}
					
					&.J_editWrapS {
						padding-right: 0;
						.uni-input {
							padding: 0 0 0 24upx;
						}
					}
				}
			}
		}
	}
	
	.uni-btn-v {
		display: flex;
		justify-content: center;
		&.J_foot {
			position: fixed;
	    bottom: 0;
	    left: 0;
	    right: 0;
			background: #fff;
	    box-shadow: 0px 0px 20upx rgba(0,0,0,0.2);
			padding: 0;
		}
		.zbtn {
			width: 24%;
			font-size: 32upx;
	    display: block;
	    border-radius: 0;
	    margin: 0;
	    height: 100upx;
	    line-height: 100upx;
			background: #fff;
			&:after {
				width: 0;
				height: 0;
			}
		}
		.J_last {
			background: #eabc4f;
			color: #fff;
		}
		.J_cancel {
			color: #000;
		}
		.J_sub {
			background: #018DEE;
	    color: #fff;
			flex: 1;
		}
	}
}

.J_conditionWrap {
	align-items: center;
	background: #fff;
	margin-bottom: 20upx;
	padding-left: 20upx;
	.zuiForm {
		$zuiForm_height: 90upx;
		.uni-row {
			background: #fff;
			padding: 8upx 0;
			border-bottom: 2upx solid #F6F6F6;
			.zpicker {
				display: block;
				width: 100%;
				height: $zuiForm_height;
				line-height: $zuiForm_height;
			}
			.des {
				width: 160upx;
				line-height: $zuiForm_height;
				padding-left: 30upx;
				position: relative;
				.zrequire {
					color: #ff0000;
					display: inline-block;
					position: absolute;
					left: 8upx;
					top: 4upx;
					font-style: normal;
				}
			}
			.inputwrap {
				padding-right: 40upx;
				color: #6b6b6b;
				display: flex;
				align-items: center;
				.uni-input {
					padding: 0;
					color: #6b6b6b;
					height: $zuiForm_height;
					line-height: $zuiForm_height;
				}
				.text {
					height: $zuiForm_height;
					line-height: $zuiForm_height;
					.cdes {
						padding-left: 26upx;
					}
				}
				.cdes {
					height: $zuiForm_height;
					line-height: $zuiForm_height;
				}
			}
		}
		.uni-common-mt {
			padding: 10upx 40upx;
		}
		.uni-title {
			padding-left: 30upx;
		}
		.uni-textarea {
			position: relative;
			uni-textarea {
				max-height: 500upx;
				text-indent: 18upx;
			}
			.textareaDes {
				position: absolute;
				right: 30upx;
				top: -68upx;
				font-size: 24upx;
				span {
					font-style: italic;
					font-size: 34upx;
					margin: 0 12upx 0 6upx;
				}
			}
		}
	}
}
</style>
